<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          【{{student.clazzName+ student.name}}】家长管理
        </p>
        <div slot="extra">
          <Button type="info" @click="addFn">
            <Icon type="plus"></Icon>
            添加
          </Button>
          <Button type="info" @click="backFn">
            <Icon type="arrow-return-left"></Icon>
            返回
          </Button>
        </div>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :downTemplate="false"
                  :importBtn="false"
                  :exportBtn="false"
                  :batchDelBtn="false"
                  :isRow="false"
                  v-on:page-change="pageChangeFn"
                  v-on:editFn="editFn"
                  v-on:searchFn="searchFn"
                  placeholder="家长名称关键字"
                  searchText="家长名称："
                  cleanText="刷新"
                  :operate="operate"
                  addText="返 回"
                  v-on:restFn="restFn">
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="subForm" :mask-closable="false" width="540"
           v-on:on-cancel="cancelSub">
      <Form ref="Form" :model="modal.form" :label-width="100" label-position="right" :rules="modal.rules">
        <FormItem label="家长名字" prop="name">
          <Input v-model="modal.form.name" placeholder="请输入IC卡号" style="width:63%"/>
        </FormItem>
        <FormItem label="联系号码" prop="phone">
          <Input v-model="modal.form.phone" placeholder="请输入IC卡号" style="width:63%"/>
        </FormItem>
        <FormItem label="与宝贝关系" prop="role" v-if="!modal.isEdit">
          <Select v-model="modal.form.role" label-in-value style="width:63%">
            <Option v-for="item in parentList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="性别" prop="status" v-if="!modal.isEdit">
          <RadioGroup v-model="modal.form.sex">
            <Radio label='男'>男</Radio>
            <Radio label='女'>女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="IC卡号">
          <Input v-model="modal.form.icCard" placeholder="请输入IC卡号" style="width:63%"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelSub">取消</Button>
        <Button type="primary" @click="subForm" :loading="modal.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";

  export default {
    components: {
      VmBtable
    },
    data() {
      const phoneValidate = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入电话号码'));
        } else {
          callback();
        }
      };
      return {
        searchParam: {
          current: 1,
          size: 20,
          total: 1,
          studentId: '',
          name: '',
        },
        student: {},
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 100
          },
          {
            title: '家长名字',
            align: 'center',
            key: 'name',
            minWidth: 100,
          },
          {
            title: '联系号码',
            align: 'center',
            key: 'phone',
            minWidth: 100,
          },
          {
            title: '关系',
            align: 'center',
            key: 'role',
            minWidth: 100,
          },
          {
            title: '是否绑定微信',
            align: 'center',
            key: 'openId',
            minWidth: 100,
            render: (h, param) => {
              return h('div', {}, param.row.openId ? '是' : '否')
            }
          },
          {
            title: 'IC卡号',
            align: 'center',
            key: 'icCard',
            minWidth: 100,
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 80,
            render: (h, params) => {
              let editBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.editFn(params.row)
                  }
                }
              }, '编辑');
              let deleteBtn = h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.deleteFn(params.row)
                  }
                }
              }, '删除');
              let btn = [editBtn,deleteBtn];
              return h('div', btn);
            }
          }
        ],
        operate: [],
        dataTable: [],
        parentList: [
          {
            id: '爸爸', 'name': '爸爸'
          },
          {
            id: '妈妈', 'name': '妈妈'
          },
          {
            id: '其他', 'name': '其他'
          },
        ],
        modal: {
          visible: false,
          title: '',
          isEdit: false,
          loading: false,
          form: {
            name: '',
            icCard: '',
            phone: '',
            role: '',
            sex: '男',
          },
          rules: {
            'name': [
              {
                required: true,
                trigger: 'blur',
                message: '必填项'
              },
            ],
            'phone': [
              {
                required: true,
                trigger: 'blur',
                validator: phoneValidate,
              }
            ],
          }
        },
      };
    },
    methods: {
      backFn() {
        this.$router.push('/student')
      },
      addFn() {
        Object.assign(this.modal, {
          visible: true,
          isEdit: false,
          title: '添加家长信息',
          form: {sex: '男', role: '妈妈'}
        })
      },
      editFn(data) {
        Object.assign(this.modal, {
          visible: true,
          isEdit: true,
          title: '编辑家长信息',
          form: data
        })
      },
      deleteFn(data) {
        this.$Modal.confirm({
          title:'警告',
          content:'是否删除该家长？',
          onOk:()=>{
            API.deleteKinsfolk({ids:data.id}).then(resp=>{
              this.queryFn();
              this.complete();
            })
          }
        })
      },
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.name = '';
        this.queryFn();
      },
      queryFn() {
        API.fetchStudentKinsfolk(this.searchParam).then(resp => {
          let data = resp.data;
          this.dataTable = data.records;
          this.searchParam.current = data.current;
          this.searchParam.total = data.total;
        })
      },
      complete() {
        Object.assign(this.modal, {
          visible: false,
          title: '',
          loading: false,
        });
        this.$refs.Form.resetFields();
      },
      subForm() {
        this.$refs.Form.validate(valid => {
          if (valid) {
            let data = Object.assign(this.modal.form);
            if (data.id) {
              API.updateKinsfolk(data).then(resp => {
                this.queryFn();
                this.complete();
              })
            } else {
              data.studentId = this.searchParam.studentId;
              API.createKinsfolk(data).then(resp => {
                this.queryFn();
                this.complete();
              })
            }
          }
        })
      },
      cancelSub() {
        this.modal.visible = false;
        this.$refs.Form.resetFields();
      },
      pageChangeFn(current) {
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.name = value;
        this.queryFn();
      },
    },
    created() {
      this.student = this.$route.query;
      this.searchParam.studentId = this.student.id;
    },
    mounted() {
      this.queryFn();
    }
  }
</script>

<style scoped>

</style>
